<template>
  <div class="dialog">
    <!-- 络筒弹窗控件 -->
    <a-modal
      width="980px"
      :visible="Dialog"
      @cancel="closeDialog"
      :closable="true"
      :mask-closable="true"
      destroy-on-close
      :footer="null"
    >
      <div slot="title" class="clearfix">
        <span class="title_top">{{ title }}</span>
      </div>
      <a-row :gutter="20" type="flex" align="middle">
        <a-col :span="5">
          <div class="display-grid">
            <div class="display-grid-item">
              <span>当前状态：</span>
              <span class="status-circle" :style="{ background: getHeadColor(socketInfo.status) }"></span>
              <span class="title_value">
                {{ getHeadName(socketInfo.status) }}
              </span>
            </div>
            <div class="display-grid-item">
              <span>品种：</span>
              <span class="title_value">{{ socketInfo.productTypeTxt }}</span>
            </div>
            <div class="display-grid-item">
              <span>挡车工：</span>
              <span class="title_value">{{ queryInfo.workers }}</span>
            </div>
          </div>
        </a-col>
        <a-col :span="7">
          <a-row>
            <a-col :span="24">
              <div class="echarts">
                <div ref="lulotongEcharts1" style="width: 100%; height: 100%"></div>
              </div>
            </a-col>
          </a-row>
        </a-col>
        <a-col :span="7">
          <a-row>
            <a-col :span="24">
              <div class="echarts">
                <div ref="lulotongEcharts2" style="width: 100%; height: 100%"></div>
              </div>
            </a-col>
          </a-row>
        </a-col>
        <a-col :span="5">
          <div class="display-grid">
            <div class="display-grid-item">
              <span>车台号：</span>
              <span class="title_value">{{ queryInfo.deviceNo }}</span>
            </div>
            <div class="display-grid-item">
              <span>班次：</span>
              <span class="title_value">{{ socketInfo.classes }}</span>
            </div>
          </div>
        </a-col>
      </a-row>
    </a-modal>
  </div>
</template>

<script>
import { getMachineRealData } from '@/api/customApi'
import people from '@/assets/data/people.json'
export default {
  name: 'dialog_duocang_jwf1027',
  props: {
    defaultData: Object
  },
  data() {
    return {
      Dialog: false,
      title: '',
      title_l: '',
      peopleList: [],
      queryInfo: {
        ljsc_handle: 0, //累计纱长
        deviceNo: '', //车台号  ----弹窗带出
        cxjd: 0, //成型角度
        product_category: '', //品种
        dypjsd: '', //锭翼平均速度
        llxsd: '', //罗拉线速度（米/分）
        ljsjwz: '', //龙筋实际位置（um）
        ylsc: 0, //一落纱长（米）
        dysjzs: 0, //锭翼实际转速（r/min）
        llsjzs: 0, //罗拉实际转速（r/min）
        f04: 0 //粗纱捻度F04（捻/分米）
      },
      socketInfo: {
        status: 0, //当前状态
        efficiency: 0, //效率
        currentActualOutput: 0,
        currentTheoryOutput: 0,
        length: 0, //当班长度
        productTypeTxt: '-' //品种
      }
    }
  },
  created() {
    this.peopleList = people
    this.socketInfo = this.defaultData
    this.socketInfo.efficiency = this.defaultData.efficiency
    this.getInfo()
  },
  computed: {
    duoCangNewestState() {
      let result
      if (this.$store.state.socketData.length != 0) {
        result = this.$store.state.socketData.filter(item => item.workshop == this.$store.state.workshopNo)
        result = result[0].dsDeviceRealTimeStatusListBlowingDc
      }
      return result
    }
  },
  watch: {
    duoCangNewestState: {
      immediate: true,
      handler(val) {
        if (val && this.queryInfo.deviceNo) {
          let result = val.filter(item => item.deviceNo == this.queryInfo.deviceNo)[0]
          this.socketInfo.status = result.status
          this.socketInfo.currentActualOutput = result.currentActualOutput
          this.socketInfo.currentTheoryOutput = result.currentTheoryOutput
          this.socketInfo.length = result.length
          this.socketInfo.efficiency = result.efficiency
          this.$nextTick(() => {
            this.init1()
            this.init2()
          })
        } else {
          this.$nextTick(() => {
            this.init1()
            this.init2()
          })
        }
      }
    }
  },
  methods: {
    //尾灯表示车台状态（运行、停止、故障、满纱满桶、通讯失败)
    getHeadColor(status) {
      switch (parseInt(status)) {
        //运行
        case 1:
          return '#7CBC44'
        //停止
        case 2:
          return '#888F93'
        //故障
        case 3:
          return '#6D000E'
        //满纱满桶
        case 4:
          return '#ECCD54'
        //通讯失败
        case 5:
          return '#EB4E27'
        // 计划停台
        case 6:
          return 'rgb(255,233,34)'
      }
    },
    getHeadName(stateCode) {
      switch (parseInt(stateCode)) {
        //运行
        case 1:
          return '运行'
        //停止
        case 2:
          return '停止'
        //故障
        case 3:
          return '故障'
        //满纱满桶
        case 4:
          return '满纱满桶'
        //通讯失败
        case 5:
          return '通讯故障'
        // 计划停台
        case 6:
          return '计划停台'
      }
    },
    getInfo() {
      this.Dialog = true
      let query = {
        company: '1771136798305476610',
        deviceNo: this.defaultData.deviceNo,
        productCategory: this.defaultData.productCategory,
        workingProcedure: this.defaultData.workingProcedure,
        workshop: this.defaultData.workshop
      }
      getMachineRealData(query)
        .then(res => {
          if (res.code == 200) {
            this.queryInfo = res.result
            this.queryInfo.deviceNo = res.result.device_no
          } else {
            this.$message.error('接口请求失败')
          }
        })
        .finally(() => {
          this.title =
            '立华' +
            this.socketInfo.workshop +
            '纺' +
            this.socketInfo.deviceNo +
            '号多仓' +
            this.socketInfo.productCode +
            '详情'
          this.$nextTick(() => {
            this.init1()
            this.init2()
          })
        })
    },
    closeDialog() {
      this.$parent.closeHandle()
    },

    init1() {
      if (this.$refs.lulotongEcharts1) {
        var lulotongEcharts1 = this.$echarts.init(this.$refs.lulotongEcharts1)
        let getmax = 100
        let getvalue = this.queryInfo.mcyl ? this.queryInfo.mcyl : 0
        let option = {
          title: [
            {
              text: '棉仓压力',
              bottom: 50,
              left: 'center',
              textStyle: {
                color: '#292B3D',
                fontSize: 16,
                fontWeight: 500
              }
            },
            {
              text: '{b|' + getvalue + '}' + '{a|pa}',
              left: 'center',
              top: 'center',
              textStyle: {
                rich: {
                  a: {
                    fontSize: 16,
                    color: '#292B3D'
                  },
                  b: {
                    fontSize: 26,
                    color: '#292B3D'
                  }
                }
              }
            }
          ],
          angleAxis: {
            show: false,
            max: (getmax * 360) / 270, //-45度到225度，二者偏移值是270度除360度
            type: 'value',
            startAngle: 225, //极坐标初始角度
            splitLine: {
              show: false
            }
          },
          barMaxWidth: 18, //圆环宽度
          radiusAxis: {
            show: false,
            type: 'category'
          },
          //圆环位置和大小
          polar: {
            center: ['50%', '50%'],
            radius: '140%'
          },
          series: [
            {
              type: 'bar',
              data: [
                {
                  //上层圆环，显示数据
                  value: getvalue,
                  itemStyle: {
                    color: '#2C60A6'
                  }
                }
              ],
              barGap: '-100%', //柱间距离,上下两层圆环重合
              coordinateSystem: 'polar',
              roundCap: true, //顶端圆角
              z: 3 //圆环层级，同zindex
            },
            {
              //下层圆环，显示最大值
              type: 'bar',
              data: [
                {
                  value: getmax,
                  itemStyle: {
                    color: '#D8DEE4',
                    opacity: 0.2,
                    borderWidth: 0
                  }
                }
              ],
              barGap: '-100%',
              coordinateSystem: 'polar',
              roundCap: true,
              z: 1
            },
            {
              name: '外部刻度',
              type: 'gauge',
              radius: '105%',
              min: 0, //最小刻度
              max: getmax, //最大刻度
              splitNumber: 10, //刻度数量
              startAngle: 225,
              endAngle: -45,
              axisLine: {
                show: true,
                lineStyle: {
                  width: 1,
                  color: [[1, 'rgba(0,0,0,0)']]
                }
              }, //仪表盘轴线
              axisLabel: {
                show: true,
                color: '#292B3D',
                distance: 25
              }, //刻度标签。
              axisTick: {
                show: false,
                splitNumber: 7,
                lineStyle: {
                  color: '#C7CBCF', //用颜色渐变函数不起作用
                  opacity: 0.6,
                  width: 2
                },
                length: -8
              }, //刻度样式
              splitLine: {
                show: false,
                length: -20,
                lineStyle: {
                  color: '#C7CBCF' //用颜色渐变函数不起作用
                }
              }, //分隔线样式
              detail: {
                show: false
              },
              pointer: {
                show: false
              }
            }
          ]
        }

        lulotongEcharts1.setOption(option)
        window.addEventListener('resize', function() {
          lulotongEcharts1.resize()
        })
      }
    },
    init2() {
      if (this.$refs.lulotongEcharts2) {
        var lulotongEcharts2 = this.$echarts.init(this.$refs.lulotongEcharts2)
        let getmax = 100
        let getvalue = (Number(this.socketInfo.efficiency) * 100).toFixed(2)
          ? (Number(this.socketInfo.efficiency) * 100).toFixed(2)
          : 0
        let option = {
          title: [
            {
              text: '产量完成率',
              bottom: 50,
              left: 'center',
              textStyle: {
                color: '#292B3D',
                fontSize: 16,
                fontWeight: 500
              }
            },
            {
              text: '{b|' + Math.round(getvalue) + '}' + '{a|%}',
              left: 'center',
              top: 'center',
              textStyle: {
                rich: {
                  a: {
                    fontSize: 16,
                    color: '#292B3D'
                  },
                  b: {
                    fontSize: 26,
                    color: '#292B3D'
                  }
                }
              }
            }
          ],
          angleAxis: {
            show: false,
            max: (getmax * 360) / 270, //-45度到225度，二者偏移值是270度除360度
            type: 'value',
            startAngle: 225, //极坐标初始角度
            splitLine: {
              show: false
            }
          },
          barMaxWidth: 18, //圆环宽度
          radiusAxis: {
            show: false,
            type: 'category'
          },
          //圆环位置和大小
          polar: {
            center: ['50%', '50%'],
            radius: '140%'
          },
          series: [
            {
              type: 'bar',
              data: [
                {
                  //上层圆环，显示数据
                  value: getvalue,
                  itemStyle: {
                    color: '#75FB67'
                  }
                }
              ],
              barGap: '-100%', //柱间距离,上下两层圆环重合
              coordinateSystem: 'polar',
              roundCap: true, //顶端圆角
              z: 3 //圆环层级，同zindex
            },
            {
              //下层圆环，显示最大值
              type: 'bar',
              data: [
                {
                  value: getmax,
                  itemStyle: {
                    color: '#D8DEE4',
                    opacity: 0.2,
                    borderWidth: 0
                  }
                }
              ],
              barGap: '-100%',
              coordinateSystem: 'polar',
              roundCap: true,
              z: 1
            },

            {
              name: '外部刻度',
              type: 'gauge',
              radius: '105%',
              min: 0, //最小刻度
              max: getmax, //最大刻度
              splitNumber: 10, //刻度数量
              startAngle: 225,
              endAngle: -45,
              axisLine: {
                show: true,
                lineStyle: {
                  width: 1,
                  color: [[1, 'rgba(0,0,0,0)']]
                }
              }, //仪表盘轴线
              axisLabel: {
                show: true,
                color: '#292B3D',
                distance: 25
              }, //刻度标签。
              axisTick: {
                show: false,
                splitNumber: 7,
                lineStyle: {
                  color: '#C7CBCF', //用颜色渐变函数不起作用
                  opacity: 0.6,
                  width: 2
                },
                length: -8
              }, //刻度样式
              splitLine: {
                show: false,
                length: -20,
                lineStyle: {
                  color: '#C7CBCF' //用颜色渐变函数不起作用
                }
              }, //分隔线样式
              detail: {
                show: false
              },
              pointer: {
                show: false
              }
            }
          ]
        }
        lulotongEcharts2.setOption(option)
        window.addEventListener('resize', function() {
          lulotongEcharts2.resize()
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
@import '~@/assets/less/workshop.less';
.a-row {
  margin-bottom: 5px;
  &:last-child {
    margin-bottom: 0;
  }
}
.echarts {
  width: 100%;
  height: 250px;
}
.title {
  color: rgb(111, 155, 184);
}
</style>
